<template>
  <div class="wall-message">
    <p class="title">{{ wallType[id].name }}</p>
    <p class="slogan">{{ wallType[id].slogan }}</p>
    <div class="lable">
      <p
        class="lable-list"
        :class="{ lbselected: nlable == -1 }"
        @click="selectNode(-1)"
      >
        全部
      </p>
      <p
        class="lable-list"
        :class="{ lbselected: nlable == index }"
        v-for="(e, index) in label[id]"
        :key="index"
        @click="selectNode(index)"
      >
        {{ e }}
      </p>
    </div>
    <div
      class="card"
      style="
         {
          width: nWidth + 'px';
        }
      "
      v-show="id == 0"
    >
      <NodeCard
        v-for="(e, index) in note"
        :key="index"
        :note="e"
        class="card-inner"
        :width="'260px'"
        :class="{ cardselected: index == cardSelected }"
        @click="selectCard(index)"
      ></NodeCard>
    </div>
    <div class="photo" v-show="id == 1">
      <PhotoCard :photo=e class="photo-card" v-for="(e,index) in photo" :key="index"  @click="selectCard(index)"></PhotoCard>
    </div>
    <div
      class="add"
      :style="{ bottom: addBottom + 'px' }"
      @click="addCard"
      v-show="!modal"
    >
      <span class="iconfont icon-tianjia"></span>
    </div>
    <ModalVue :title="title" @close="changeModal" :isModal="modal">
      <NewCard
        :labels="label[id]"
        @addClose="changeModal"
        v-if="cardSelected == -1"
      ></NewCard>
      <CardDetail
        v-if="cardSelected != -1"
        :card="card[cardSelected]"
      ></CardDetail>
    </ModalVue>
    <Viewer :isView="view" :photos="photoArr" :nowNumber="cardSelected" @viewSwitch="viewSwitch"></Viewer>
  </div>
</template>

<script>
import { wallType, label } from "@/static/data";
import NodeCard from "@/components/NodeCard.vue";
import { note, photo } from "@/mock/index";
import ModalVue from "@/components/Modal.vue";
import NewCard from "@/components/NewCard.vue";
import CardDetail from "@/components/CardDetail.vue";
import PhotoCard from "@/components/PhotoCard.vue";
import Viewer from "@/components/Viewer.vue";
export default {
  data() {
    return {
      wallType,
      label,
      nlable: -1, //当前对应的标签
      note: note.data,
      photo: photo.data,
      photoArr:[],//图片列表
      nWidth: 0, //卡片模块宽度
      addBottom: 30, //add按钮底部距离
      title: "写留言", //新建标题
      modal: false, //是否调用弹窗
      view:false,
      cardSelected: -1, //当前选择卡片
    };
  },
  components: {
    NodeCard,
    ModalVue,
    NewCard,
    CardDetail,
    PhotoCard,
    Viewer,
  },
  computed: {
    id(){
      return this.$route.query.id;
    },
    card(){
      let a='';
      if(this.$route.query.id==0){
        a = note.data;
      }else if(this.$route.query.id==1){
        a = photo.data;
      }
      return a;
    },
  },
  watch:{
    id(newValue,oldValue){
      this.modal = false;
      this.view = false;
      this.nlable= -1;
      this.cardSelected =-1
    }
  },
  methods: {
    selectNode(e) {
      this.nlable = e;
      console.log(this.nWidth);
    },
    notewidth() {
      let wWidth = document.body.clientWidth;
      this.nWidth = Math.floor(wWidth - 120) * 300;
    },
    scrollBottom() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight + 230 >= scrollHight) {
        this.addBottom = scrollTop + clientHeight + 210 - scrollHight;
      } else {
        this.addBottom = 30;
      }
    },
    addCard() {
      this.title = "写留言";
      this.changeModal();
    },
    changeModal() {
      this.modal = !this.modal;
      this.cardSelected=-1;
      if(this.id==1){
          this.view=false;
        }
    },
    selectCard(e) {
      this.title = "";
      if (e != this.cardSelected) {
        this.cardSelected = e;
        this.modal = true;
        if(this.id==1){
          this.view=true;
        }
      } else {
        this.cardSelected = -1;
        this.modal = false;
        if(this.id==0){
          this.view=false;
        }
      }
    },
    // 获取图片
    getPhoto(){
      for(let i=0;i<this.photo.length;i++){
        this.photoArr.push(this.photo[i].imgurl)
      }
      console.log(this.photoArr)
    },
    //切换图片
    viewSwitch(e){
      if(e==0){
        this.cardSelected--;
      }else{
        this.cardSelected++;
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollBottom);
    this.getPhoto()
  },
  unmounted() {
    window.addEventListener("scroll", this.scrollBottom);
  },
};
</script>

<style lang="less" scoped>
.wall-message {
  min-height: 150vh;
  padding-top: 48px;
  .title {
    padding-top: 38px;
    padding-bottom: 8px;
    font-size: 52px;
    color: #202020;
    text-align: center;
    font-weight: 600;
  }
  .slogan {
    color: #5b5b5b;
    text-align: center;
  }
  .lable {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    .lable-list {
      padding: 0 14px;
      display: flex;
      align-items: center;
      user-select: none;
      cursor: pointer;
      height: 30px;
      margin: 4px;
      color: #5b5b5b;
      box-sizing: border-box;
    }
    .lbselected {
      color: #202020;
      font-weight: 600;
      border-radius: 14px;
      border: 1.5px #202020 solid;
    }
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    // border: 1px red solid;
    padding-top: 25px;
    // margin: auto;
    .card-inner {
      margin: 6px;
    }
    .cardselected {
      border: 1px solid #3b73f0;
    }
  }
  .photo{
    width: 90%;
        margin: 0 auto;
        columns: 6;
        column-gap: 4px;
        padding-top: 22px;
        .photo-card{
            margin-bottom: 4px;
            break-inside: avoid;
            transition: all 0.3s;
            &:hover{
                scale: 1.03;
            }
            
        }
}
  .add {
    width: 50px;
    height: 50px;
    background: #202020;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    border-radius: 28px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.1s;
    .icon-tianjia {
      color: #fff;
      font-size: 24px;
    }
  }
}
</style>